<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 

<style type="text/css">
	
	.div{
		width: 100px;height: 100px;
		background: black;
		position: absolute;
		left: 100px;top: 100px;
	}
	#div2{
		width: 10px;height: 10px;
		background: red;position: absolute;
		left: 10px;top: 10px;
	}
</style>

</head>
<body>

	
	<div class='div'></div>
	<div class='div'></div>
	<div class='div'></div>
	<div class='div'></div>
	<div class='div'></div>
	<div class='div'></div>
		
	<script type="text/javascript">

document.onmousedown = function(e){
	var ev = e || event;
	var os = ev.target || ev.srcElement;

	if(os.nodeName == 'DIV'){
		var l = ev.clientX - os.offsetLeft;
		var t = ev.clientY - os.offsetTop;

		
		document.onmousemove = function(e){
			var ev = e || event;
			os.style.left = ev.clientX - l + 'px';
			os.style.top = ev.clientY - t + 'px';
		}
		document.onmouseup = function(){
			document.onmousemove =null;
			document.onmouseup = null;
		}

	}
}



/*
div.onmousedown = function(e){
	var ev = e || event;
	var l = ev.clientX - this.offsetLeft;
	var t = ev.clientY - this.offsetTop;

	document.onmousemove = function(e){
		var ev = e || event;
		div.style.left = ev.clientX - l + 'px';
		div.style.top = ev.clientY - t + 'px';
	}
	document.onmouseup = function(){
		document.onmousemove =null;
		document.onmouseup = null;
	}



}
*/

	</script>
</body>
</html>